<template>
  <div class="pagination-container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      :layout="layout"
      :background="true"
      :small="false"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="custom-pagination"
    />
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  name: 'PaginationComponent',
  props: {
    /** 总记录数 */
    total: {
      type: Number,
      default: 0
    },
    /** 当前页码 */
    page: {
      type: Number,
      default: 1
    },
    /** 每页大小 */
    size: {
      type: Number,
      default: 10
    },
    /** 每页大小选项 */
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100]
    },
    /** 分页布局 */
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  emits: ['page-change', 'size-change'],
  setup(props, { emit }) {
    const currentPage = ref(props.page)
    const pageSize = ref(props.size)

    // 监听props变化
    watch(() => props.page, (newVal) => {
      currentPage.value = newVal
    })

    watch(() => props.size, (newVal) => {
      pageSize.value = newVal
    })

    // 处理页码变化
    const handleCurrentChange = (page) => {
      currentPage.value = page
      emit('page-change', {
        page: page,
        size: pageSize.value
      })
    }

    // 处理每页大小变化
    const handleSizeChange = (size) => {
      pageSize.value = size
      currentPage.value = 1 // 重置到第一页
      emit('size-change', {
        page: 1,
        size: size
      })
    }

    return {
      currentPage,
      pageSize,
      handleCurrentChange,
      handleSizeChange
    }
  }
}
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 20px 0;
}

.custom-pagination {
  --el-pagination-font-size: 14px;
  --el-pagination-bg-color: #ffffff;
  --el-pagination-text-color: #606266;
  --el-pagination-border-radius: 4px;
  --el-pagination-button-color: #606266;
  --el-pagination-button-bg-color: #ffffff;
  --el-pagination-button-disabled-color: #c0c4cc;
  --el-pagination-button-disabled-bg-color: #ffffff;
  --el-pagination-hover-color: #017fa5;
  --el-pagination-hover-bg-color: #f5f7fa;
  --el-pagination-active-color: #017fa5;
  --el-pagination-active-bg-color: #017fa5;
  --el-pagination-active-text-color: #ffffff;
}

:deep(.el-pagination__total) {
  color: #714B67;
  font-weight: 600;
}

:deep(.el-pagination__sizes) {
  color: #714B67;
}

:deep(.el-pagination__jump) {
  color: #714B67;
}

:deep(.el-pagination__total) {
  margin-right: 20px;
}

:deep(.el-pagination__sizes) {
  margin-right: 20px;
}

:deep(.el-pagination__jump) {
  margin-left: 20px;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  color: #714B67;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;
}

:deep(.el-pagination .btn-prev:hover),
:deep(.el-pagination .btn-next:hover) {
  color: #017fa5;
  border-color: #017fa5;
  background-color: #f0f9ff;
}

:deep(.el-pagination .el-pager li) {
  color: #714B67;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;
  margin: 0 2px;
}

:deep(.el-pagination .el-pager li:hover) {
  color: #017fa5;
  border-color: #017fa5;
  background-color: #f0f9ff;
}

:deep(.el-pagination .el-pager li.is-active) {
  color: #ffffff;
  background-color: #017fa5;
  border-color: #017fa5;
}

:deep(.el-pagination .el-pager li.is-active:hover) {
  color: #ffffff;
  background-color: #017fa5;
  border-color: #017fa5;
}

:deep(.el-select .el-input__inner) {
  color: #714B67;
  border-color: #dcdfe6;
}

:deep(.el-select .el-input__inner:focus) {
  border-color: #017fa5;
}

:deep(.el-input__inner) {
  color: #714B67;
  border-color: #dcdfe6;
}

:deep(.el-input__inner:focus) {
  border-color: #017fa5;
}
</style>
